import Treeview4 from "./treeview4";

window.addEventListener("DOMContentLoaded", () => {
  //创建控制元素折叠展开的子菜单
  let visibilityMenu = {
    text: "Manage Visibility",
    icon: "image/tree.png",
    submenu: [
      {
        text: "Toggle Node",
        icon: "image/leaf.png",
        action: function (node) {
          node.toggleNode();
        },
        submenu: [],
      },
      {
        text: "Expand Node",
        icon: "image/leaf.png",
        action: function (node) {
          node.expandNode();
        },
        submenu: [],
      },
      {
        text: "Collapse Node",
        icon: "image/leaf.png",
        action: function (node) {
          node.collapseNode();
        },
        submenu: [],
      },
      {
        text: "Expand Subtree",
        icon: "image/leaf.png",
        action: function (node) {
          node.expandSubtree();
        },
        submenu: [],
      },
      {
        text: "Collapse Subtree",
        icon: "image/leaf.png",
        action: function (node) {
          node.collapseSubtree();
        },
        submenu: [],
      },
    ],
  };

  //创建控制元素删除
  let elementMenu = {
    text: "Manage Element",
    icon: "image/tree.png",
    submenu: [
      {
        text: "Create Child Node",
        icon: "images/add.png",
        action: function (node) {
          node.createChildNode(
            node,
            null,
            "Level N - Created",
            "image/file.png",
            null,
            null
          );
          node.expandNode();
        },
        submenu: [],
      },
      {
        text: "Delete Node",
        icon: "images/delete.png",
        action: function (node) {
          node.removeNode();
        },
        submenu: [],
      },
      {
        text: "Delete Subtree",
        icon: "images/delete.png",
        action: function (node) {
          node.removeSubTree();
        },
        submenu: [],
      },
    ],
  };

  //创建主菜单
  let menu = [visibilityMenu, elementMenu];

  const tv = new Treeview4("#tree", menu);
});
